import React from 'react'
import { LdhMapSelect, LdhInput, LdhRangePicker } from '@biz/Components'
import { LdhSearchForm, LdhSearchItem } from '@biz/PageCompnents'
import { Col, Row, Statistic } from 'antd'
import GUtils from '@/utils'

export default class PlatformDataWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.onSearch = this.onSearch.bind(this)
  }

  componentDidMount() {
    this.onSearch({})
  }

  onSearch(values) {
    let { action, store } = this.props
    let { so } = store
    so = { ...so, ...values, pageNumber: 1 }
    GUtils.dealDateRange(values.date, 'date', so)
    action.getData(so)
  }

  render() {
    let { store } = this.props
    let { loading, data = {} } = store
    /*   let {userTotalAmount, rechargeAmount, refundAmount, shopAmount, incomeAmount} = data;*/
    console.log('========', data)
    return (
      <div>
        <div className="page-title">平台数据</div>
        <LdhSearchForm onSearch={this.onSearch} loading={loading}>
          <LdhSearchItem label="时间" name="date">
            <LdhRangePicker />
          </LdhSearchItem>
        </LdhSearchForm>

        <Row gutter={20} className="data-content">
          <Col span={5}>
            <div className="amount-box">
              <div className="main-amount">{data.totalIncome}</div>
              <div className="main-title">总收入</div>
              <div>余额充值：{data.rechargeIncome}</div>
              <div>会员开通：{data.vipIncome}</div>
            </div>
          </Col>

          <Col span={5}>
            <div className="amount-box">
              <div className="main-amount">{data.totalRefund}</div>
              <div className="main-title">总退款</div>
              <div>余额充值：{data.rechargeRefund}</div>
              <div>会员开通：{data.vipRefund}</div>
            </div>
          </Col>

          <Col span={5}>
            <div className="amount-box">
              <div className="main-amount">{data.totalBalance}</div>
              <div className="main-title">用户总余额</div>
              <div>余额：{data.userBalance}</div>
              <div></div>
              {/* <div>会员开通：{data.vipIncome}</div>*/}
            </div>
          </Col>

          <Col span={5}>
            <div className="amount-box">
              <div className="main-amount">{data.netIncome}</div>
              <div className="main-title">总收入</div>
              <div>&nbsp;</div>
              <div>会员抵扣：{data.vipDiscount}</div>
            </div>
          </Col>
        </Row>

        {/* <Row gutter={20} className="data-content">
                <Col span={5}> <Statistic title="平台用户总可用余额" value={userTotalAmount}/></Col>
                <Col span={5}> <Statistic title="余额充值订单收入" value={rechargeAmount}/></Col>
                <Col span={5}> <Statistic title="余额订单退款金额" value={refundAmount}/></Col>
                <Col span={5}> <Statistic title="商家待结算总金额" value={shopAmount}/></Col>
                <Col span={4}> <Statistic title="收入" value={incomeAmount}/></Col>

            </Row>*/}
      </div>
    )
  }
}
